<template>
  <div id="app">
    <button
      v-for="(item, index) in arr"
      :key="index"
      @click="tab = item"
      :class="['tab-button', { active: item === tab }]"
    >
      {{ item }}
    </button>
    <keep-alive :max="3">
      <div class="tab" :is="tab"></div>
    </keep-alive>
  </div>
</template>

<script>
import charge from "@/components/charge.vue";
import email from "@/components/email";
import home from "@/components/home";
import mine from "@/components/mine";

export default {
  name: "App",
  data() {
    return {
      arr: ["home", "mine", "email", "charge"],
      tab: "home",
    };
  },
  components: { charge, email, home, mine },
};
</script>

<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: hotpink;
}

.tab {
  border: 1px solid #ccc;
}
h1 {
  margin: 0;
}
</style>
